<template>
    <div class="handAniWrapper">
        <div class="jie" :class="{showJie: show}"></div>
        <div class="leftHand leftAni" :class="[{hideHand: !show}, {showLeft: show}]"></div>
        <div class="rightHand rightAni" :class="[{hideHand: !show}, {showRight: show}]"></div>
    </div>
</template>

<script>
    export default {
        props: ['resources', 'pageType'],
        data() {
            return{
                show: false,
            }
        },
        mounted() {
            this.showHands();
        },
        methods: {
            showHands() {
                setTimeout(() => {
                    this.show = true;
                }, 2000);
            }
        },
    }
</script>
<style lang="less" scoped>
    .handAniWrapper{
        height: 3rem;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
        .jie{
            height: 2.63rem;
            width: 2.56rem;
            position: absolute;
            top: 0rem;
            left: 3.71rem;
            background-image: url("../../img/index/btn.png");
            background-size: 100%;
            background-repeat: no-repeat;
            display: none;
        }
        .showJie{
            display: block;
        }

        .leftHand{
            width: 2.95rem;
            height: 1.49rem;
            position: absolute;
            top: 0rem;
            left: 0;
            background-image: url("../../img/face/leftHand.png");
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .rightHand{
            width: 2.99rem;
            height: 1.48rem;
            position: absolute;
            top: 0rem;
            right: 0;
            background-image: url("../../img/face/rightHand.png");
            background-size: 100%;
            background-repeat: no-repeat;
        }
        .hideHand{
            display: none;
        }
        /*.showLeft{*/
            /*-webkit-animation: showLeft 2s;*/
            /*animation: showLeft 2s;*/
        /*}*/
        /*@keyframes showLeft {*/
            /*0%{*/
                /*left: -2.92rem;*/
                /*bottom: 5.13rem;*/
            /*}*/
            /*50%{*/
                /*bottom: 2.19rem;*/
                /*left: 0;*/
            /*}*/
            /*100% {*/
                /*left: -2.92rem;*/
                /*bottom: 5.13rem;*/
            /*}*/
        /*}*/
        /*@-webkit-keyframes showLeft {*/
            /*0%{*/
                /*left: -2.92rem;*/
                /*bottom: 5.13rem;*/
            /*}*/
            /*50%{*/
                /*bottom: 2.19rem;*/
                /*left: 0;*/
            /*}*/
            /*100% {*/
                /*left: -2.92rem;*/
                /*bottom: 5.13rem;*/
            /*}*/
        /*}*/
        /*.showRight{*/
            /*-webkit-animation: showRight 20s;*/
            /*animation: showRight 20s;*/
        /*}*/
        /*@keyframes showRight {*/
            /*0%{*/
                /*right: -2.99rem;*/
                /*bottom: 5.17rem;*/
            /*}*/
            /*100% {*/
                /*bottom: 2.19rem;*/
                /*right: 0;*/
            /*}*/
        /*}*/
        /*@-webkit-keyframes showRight {*/
            /*0%{*/
                /*right: -2.99rem;*/
                /*bottom: 5.17rem;*/
            /*}*/
            /*100% {*/
                /*bottom: 2.19rem;*/
                /*right: 0;*/
            /*}*/
        /*}*/

        .leftAni{
            -webkit-animation: leftAni 1s infinite;
            animation: leftAni 1s infinite;
        }
        @keyframes leftAni {
            0%{
                left: -1.33rem;
                bottom: 3.52rem;
            }
            50%{
                bottom: 2.19rem;
                left: 0;
            }
            100% {
                left: -1.33rem;
                bottom: 3.52rem;
            }
        }
        @-webkit-keyframes leftAni {
            0%{
                left: -1.33rem;
                bottom: 3.52rem;
            }
            50%{
                bottom: 2.19rem;
                left: 0;
            }
            100% {
                left: -1.33rem;
                bottom: 3.52rem;
            }
        }
        .rightAni{
            -webkit-animation: rightAni 1s infinite;
            animation: rightAni 1s infinite;
        }
        @keyframes rightAni {
            0%{
                right: -1.33rem;
                bottom: 3.52rem;
            }
            50%{
                bottom: 2.19rem;
                right: 0;
            }
            100% {
                right: -1.33rem;
                bottom: 3.52rem;
            }
        }
        @-webkit-keyframes rightAni {
            0%{
                right: -1.33rem;
                bottom: 3.52rem;
            }
            50%{
                bottom: 2.19rem;
                right: 0;
            }
            100% {
                right: -1.33rem;
                bottom: 3.52rem;
            }
        }

    }
</style>
